<template>
  <div class="zhuhai-trading-dashboard min-h-screen p-6" 
       :class="themeState.isLight ? 'bg-gradient-to-br from-gray-50 to-gray-100' : 'system-bg'">
    <!-- 通知系统 -->
    <div class="fixed top-4 right-4 z-50 space-y-2 max-w-sm">
      <div
        v-for="notification in notifications"
        :key="notification.id"
        class="glass-card p-4 border-l-4 animate-slideInRight"
        :class="{
          'border-green-400': notification.type === 'success',
          'border-blue-400': notification.type === 'info',
          'border-yellow-400': notification.type === 'warning',
          'border-red-400': notification.type === 'error'
        }"
      >
        <div class="flex items-start">
          <div class="flex-1">
            <p class="text-white text-sm">{{ notification.message }}</p>
            <p class="text-white/60 text-xs mt-1">{{ notification.timestamp }}</p>
          </div>
          <button @click="notifications.splice(notifications.indexOf(notification), 1)" class="text-white/60 hover:text-white ml-2">
            ×
          </button>
        </div>
      </div>
    </div>

    <!-- 加载遮罩 -->
    <div v-if="isLoading" class="fixed inset-0 bg-black/50 flex items-center justify-center z-40">
      <div class="glass-card p-8 text-center">
        <div class="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-4 mx-auto"></div>
        <p class="text-white">正在处理您的请求...</p>
      </div>
    </div>

    <!-- 分析结果模态框 -->
    <div v-if="showAnalysisModal && currentAnalysis" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" @click="closeAnalysisModal">
      <div class="glass-card p-8 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto" @click.stop>
        <div class="flex items-center justify-between mb-6">
          <h3 class="text-2xl font-bold text-white">{{ currentAnalysis.title }}</h3>
          <button @click="closeAnalysisModal" class="text-white/60 hover:text-white text-2xl">×</button>
        </div>
        
        <div class="space-y-4">
          <div v-if="currentAnalysis.type === 'tax_impact'">
            <div class="grid grid-cols-2 gap-4 mb-6">
              <div class="text-center p-4 bg-blue-500/10 rounded-lg">
                <div class="text-2xl font-bold text-blue-400">{{ currentAnalysis.data.currentLoss }}</div>
                <div class="text-white/70">月度损失</div>
              </div>
              <div class="text-center p-4 bg-red-500/10 rounded-lg">
                <div class="text-2xl font-bold text-red-400">{{ currentAnalysis.data.affectedProducts }}</div>
                <div class="text-white/70">受影响产品</div>
              </div>
            </div>
            <div class="space-y-3">
              <h4 class="text-white font-semibold mb-3">推荐应对措施：</h4>
              <div v-for="(action, index) in currentAnalysis.data.recommendedActions" :key="index" 
                   class="flex items-start p-3 bg-white/5 rounded-lg">
                <span class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3 mt-0.5">{{ index + 1 }}</span>
                <span class="text-white/80">{{ action }}</span>
              </div>
            </div>
          </div>
          
          <div v-else-if="currentAnalysis.type === 'strategy'">
            <div class="space-y-4">
              <div class="p-4 bg-green-500/10 rounded-lg">
                <h4 class="text-green-400 font-semibold mb-2">优先级1</h4>
                <p class="text-white/80">{{ currentAnalysis.data.priority1 }}</p>
              </div>
              <div class="p-4 bg-blue-500/10 rounded-lg">
                <h4 class="text-blue-400 font-semibold mb-2">优先级2</h4>
                <p class="text-white/80">{{ currentAnalysis.data.priority2 }}</p>
              </div>
              <div class="p-4 bg-purple-500/10 rounded-lg">
                <h4 class="text-purple-400 font-semibold mb-2">优先级3</h4>
                <p class="text-white/80">{{ currentAnalysis.data.priority3 }}</p>
              </div>
              <div class="border-t border-white/20 pt-4">
                <div class="grid grid-cols-2 gap-4">
                  <div class="text-center">
                    <div class="text-yellow-400 font-bold">{{ currentAnalysis.data.timeline }}</div>
                    <div class="text-white/70 text-sm">实施周期</div>
                  </div>
                  <div class="text-center">
                    <div class="text-green-400 font-bold">{{ currentAnalysis.data.expectedReturn }}</div>
                    <div class="text-white/70 text-sm">预期收益</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div v-else-if="currentAnalysis.type === 'pricing'">
            <div class="grid grid-cols-2 gap-4">
              <div class="p-4 bg-blue-500/10 rounded-lg text-center">
                <div class="text-2xl font-bold text-blue-400">{{ currentAnalysis.data.adjustedProducts }}</div>
                <div class="text-white/70">调整产品数</div>
              </div>
              <div class="p-4 bg-green-500/10 rounded-lg text-center">
                <div class="text-2xl font-bold text-green-400">{{ currentAnalysis.data.averageIncrease }}</div>
                <div class="text-white/70">平均涨幅</div>
              </div>
            </div>
            <div class="mt-4 p-4 bg-white/5 rounded-lg">
              <div class="text-center">
                <div class="text-green-400 font-bold text-xl">{{ currentAnalysis.data.expectedRevenue }}</div>
                <div class="text-white/70">预期增收</div>
                <div class="text-blue-400 text-sm mt-2">客户保留率: {{ currentAnalysis.data.customerRetention }}</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="flex justify-end mt-6">
          <button @click="closeAnalysisModal" class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
            确定
          </button>
        </div>
      </div>
    </div>

    <!-- Header Section -->
    <div class="glass-card p-8 mb-8">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
          <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full flex items-center justify-center mr-6">
            <div class="text-2xl">🛒</div>
          </div>
          <div>
            <h1 class="text-3xl font-bold text-white mb-2">珠海跨境贸易有限公司</h1>
            <p class="text-blue-200">Zhuhai Cross-border Trading Co. | TikTok Shop美国站资深卖家</p>
            <div class="flex items-center mt-2">
              <AlertTriangle class="w-4 h-4 text-blue-400 mr-2" />
              <span class="text-blue-400 text-sm">重要: 美国税改政策生效 | 已启动巴西市场拓展</span>
            </div>
          </div>
        </div>
        <div class="text-right">
          <div class="text-2xl font-bold text-electric-500">$2.8M</div>
          <div class="text-white/70 text-sm">年营业额 (2024)</div>
        </div>
      </div>

      <!-- Key Statistics -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-blue-400 mb-2">4年</div>
          <div class="text-white/70 text-sm">TikTok Shop经验</div>
        </div>
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-indigo-400 mb-2">850K</div>
          <div class="text-white/70 text-sm">月订单量</div>
        </div>
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-cyan-400 mb-2">30%</div>
          <div class="text-white/70 text-sm">税改影响</div>
        </div>
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-green-400 mb-2">巴西</div>
          <div class="text-white/70 text-sm">新目标市场</div>
        </div>
      </div>
    </div>

    <!-- US Tax Policy Alert -->
    <div class="glass-card p-8 mb-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <AlertCircle class="w-8 h-8 mr-3 text-blue-400" />
        美国税改政策实时追踪
      </h2>

      <!-- Critical Alert -->
      <div class="bg-blue-500/20 border border-blue-500/30 rounded-lg p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-blue-400 font-bold text-xl">⚠️ 重要政策变更通知</h3>
          <span class="text-blue-300 text-sm">2025年5月2日生效</span>
        </div>
        <div class="space-y-3">
          <p class="text-white text-lg font-semibold">美国取消$800免税额度，对中国商品征收30%关税或$50-75固定费</p>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white/10 rounded-lg p-4">
              <div class="text-green-400 font-semibold mb-2">旧政策</div>
              <div class="text-white text-sm">$800以下包裹免税</div>
              <div class="text-green-400 text-sm">零关税成本</div>
            </div>
            <div class="bg-white/10 rounded-lg p-4">
              <div class="text-cyan-400 font-semibold mb-2">新政策</div>
              <div class="text-white text-sm">所有包裹征税</div>
              <div class="text-blue-400 text-sm">30%关税 或 $50-75固定费</div>
            </div>
            <div class="bg-white/10 rounded-lg p-4">
              <div class="text-indigo-400 font-semibold mb-2">影响预估</div>
              <div class="text-white text-sm">成本增加30-45%</div>
              <div class="text-blue-400 text-sm">月损失: $420K</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Response Strategy -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-4">应对策略执行</h3>
          <div class="space-y-3">
            <div class="p-4 bg-green-500/10 border border-green-500/30 rounded-lg">
              <div class="flex items-center justify-between mb-2">
                <span class="text-green-400 font-semibold">✅ 包裹合并策略</span>
                <span class="text-green-400 text-sm">已实施</span>
              </div>
              <p class="text-white/80 text-sm">将小包裹合并为大包裹，减少固定费影响</p>
              <div class="text-green-400 text-sm mt-2">预计节省: $180K/月</div>
            </div>
            
            <div class="p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
              <div class="flex items-center justify-between mb-2">
                <span class="text-blue-400 font-semibold">🔄 价格调整方案</span>
                <span class="text-blue-400 text-sm">进行中</span>
              </div>
              <p class="text-white/80 text-sm">调整产品定价策略，转移部分税费成本给消费者</p>
              <div class="text-blue-400 text-sm mt-2">预计挽回: $240K/月</div>
            </div>
            
            <div class="p-4 bg-purple-500/10 border border-purple-500/30 rounded-lg">
              <div class="flex items-center justify-between mb-2">
                <span class="text-purple-400 font-semibold">🌍 市场多元化</span>
                <span class="text-purple-400 text-sm">规划中</span>
              </div>
              <p class="text-white/80 text-sm">拓展巴西、东南亚等新兴市场</p>
              <div class="text-purple-400 text-sm mt-2">目标: +$500K/月</div>
            </div>
          </div>
        </div>

        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-4">实时监控数据</h3>
          <div class="space-y-3">
            <div class="bg-white/5 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-white/70">订单量变化</span>
                <span class="text-blue-400 font-semibold">-28%</span>
              </div>
              <div class="w-full bg-gray-600 rounded-full h-2">
                <div class="bg-blue-400 h-2 rounded-full" style="width: 72%"></div>
              </div>
            </div>
            
            <div class="bg-white/5 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-white/70">利润率</span>
                <span class="text-cyan-400 font-semibold">-15%</span>
              </div>
              <div class="w-full bg-gray-600 rounded-full h-2">
                <div class="bg-cyan-400 h-2 rounded-full" style="width: 85%"></div>
              </div>
            </div>
            
            <div class="bg-white/5 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-white/70">客户满意度</span>
                <span class="text-indigo-400 font-semibold">-8%</span>
              </div>
              <div class="w-full bg-gray-600 rounded-full h-2">
                <div class="bg-indigo-400 h-2 rounded-full" style="width: 92%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Brazil Market Expansion -->
    <div class="glass-card p-8 mb-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <Globe class="w-8 h-8 mr-3 text-green-400" />
        巴西市场拓展计划
      </h2>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Market Analysis -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-4">市场分析</h3>
          <div class="space-y-3">
            <div class="bg-white/5 rounded-lg p-4">
              <div class="flex items-center mb-3">
                <span class="text-2xl mr-3">🇧🇷</span>
                <div>
                  <div class="text-white font-semibold">巴西市场概况</div>
                  <div class="text-white/70 text-sm">南美最大电商市场</div>
                </div>
              </div>
              <div class="space-y-2">
                <div class="flex items-center justify-between">
                  <span class="text-white/70 text-sm">人口规模</span>
                  <span class="text-white">2.15亿</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-white/70 text-sm">电商渗透率</span>
                  <span class="text-green-400">74%</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-white/70 text-sm">年增长率</span>
                  <span class="text-green-400">+18%</span>
                </div>
              </div>
            </div>
            
            <div class="bg-white/5 rounded-lg p-4">
              <div class="text-white font-semibold mb-2">TikTok Shop巴西站</div>
              <div class="text-green-400 text-sm mb-2">✅ 2024年12月正式上线</div>
              <div class="text-white/80 text-sm">首批入驻商家政策优惠，免平台费3个月</div>
            </div>
          </div>
        </div>

        <!-- Entry Strategy -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-4">进入策略</h3>
          <div class="space-y-3">
            <div class="bg-blue-500/10 rounded-lg p-4">
              <div class="text-blue-400 font-semibold mb-2">第一阶段 - 市场测试</div>
              <div class="text-white/80 text-sm mb-2">
                • 选择20款热销产品<br>
                • 建立本地化物流<br>
                • 葡语客服团队
              </div>
              <div class="text-blue-400 text-sm">时间: 3个月</div>
            </div>
            
            <div class="bg-purple-500/10 rounded-lg p-4">
              <div class="text-purple-400 font-semibold mb-2">第二阶段 - 规模扩张</div>
              <div class="text-white/80 text-sm mb-2">
                • 产品线扩展至100+<br>
                • 本地合作伙伴<br>
                • 营销推广投入
              </div>
              <div class="text-purple-400 text-sm">时间: 6个月</div>
            </div>
            
            <div class="bg-green-500/10 rounded-lg p-4">
              <div class="text-green-400 font-semibold mb-2">第三阶段 - 深度本土化</div>
              <div class="text-white/80 text-sm mb-2">
                • 巴西本地仓储<br>
                • 供应链本土化<br>
                • 品牌建设
              </div>
              <div class="text-green-400 text-sm">时间: 12个月</div>
            </div>
          </div>
        </div>

        <!-- Regulatory Compliance -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-4">合规要求</h3>
          <div class="space-y-3">
            <div class="bg-white/5 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-white font-semibold text-sm">税务登记</span>
                <CheckCircle class="w-5 h-5 text-green-400" />
              </div>
              <div class="text-white/70 text-xs">CNPJ企业注册已完成</div>
            </div>
            
            <div class="bg-white/5 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-white font-semibold text-sm">进口许可</span>
                <Clock class="w-5 h-5 text-blue-400" />
              </div>
              <div class="text-white/70 text-xs">SISCOMEX系统注册中</div>
            </div>
            
            <div class="bg-white/5 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-white font-semibold text-sm">产品认证</span>
                <Clock class="w-5 h-5 text-blue-400" />
              </div>
              <div class="text-white/70 text-xs">INMETRO认证申请中</div>
            </div>
            
            <div class="bg-white/5 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-white font-semibold text-sm">数据保护</span>
                <CheckCircle class="w-5 h-5 text-green-400" />
              </div>
              <div class="text-white/70 text-xs">LGPD合规方案已制定</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作功能面板 -->
    <div class="glass-card p-8 mb-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <TrendingUp class="w-8 h-8 mr-3 text-blue-400" />
        智能业务管理系统
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- 税务管理 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">税务管理</h3>
          <div class="space-y-2">
            <button @click="analyzeTaxImpact" class="w-full px-4 py-3 bg-blue-500/20 text-blue-300 rounded-lg hover:bg-blue-500/30 transition-colors flex items-center">
              <AlertTriangle class="w-4 h-4 mr-2" />
              税改影响分析
            </button>
            <button @click="openTaxCalculator" class="w-full px-4 py-3 bg-indigo-500/20 text-indigo-300 rounded-lg hover:bg-indigo-500/30 transition-colors flex items-center">
              <i data-lucide="calculator" class="w-4 h-4 mr-2"></i>
              关税计算器
            </button>
            <button @click="generateComplianceReport" class="w-full px-4 py-3 bg-cyan-500/20 text-cyan-300 rounded-lg hover:bg-cyan-500/30 transition-colors flex items-center">
              <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
              税务合规报告
            </button>
          </div>
        </div>

        <!-- 市场拓展 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">市场拓展</h3>
          <div class="space-y-2">
            <button @click="analyzeBrazilMarket" class="w-full px-4 py-3 bg-green-500/20 text-green-300 rounded-lg hover:bg-green-500/30 transition-colors flex items-center">
              <Globe class="w-4 h-4 mr-2" />
              巴西市场分析
            </button>
            <button @click="openCompetitorAnalysis" class="w-full px-4 py-3 bg-emerald-500/20 text-emerald-300 rounded-lg hover:bg-emerald-500/30 transition-colors flex items-center">
              <i data-lucide="target" class="w-4 h-4 mr-2"></i>
              竞品对比分析
            </button>
            <button @click="openSalesPredictor" class="w-full px-4 py-3 bg-teal-500/20 text-teal-300 rounded-lg hover:bg-teal-500/30 transition-colors flex items-center">
              <i data-lucide="trending-up" class="w-4 h-4 mr-2"></i>
              销售预测模型
            </button>
          </div>
        </div>

        <!-- 运营优化 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">运营优化</h3>
          <div class="space-y-2">
            <button class="w-full px-4 py-3 bg-purple-500/20 text-purple-300 rounded-lg hover:bg-purple-500/30 transition-colors flex items-center">
              <i data-lucide="package" class="w-4 h-4 mr-2"></i>
              包裹合并优化
            </button>
            <button class="w-full px-4 py-3 bg-violet-500/20 text-violet-300 rounded-lg hover:bg-violet-500/30 transition-colors flex items-center">
              <i data-lucide="truck" class="w-4 h-4 mr-2"></i>
              物流路径规划
            </button>
            <button class="w-full px-4 py-3 bg-pink-500/20 text-pink-300 rounded-lg hover:bg-pink-500/30 transition-colors flex items-center">
              <i data-lucide="users" class="w-4 h-4 mr-2"></i>
              客户关系管理
            </button>
          </div>
        </div>

        <!-- 风险控制 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">风险控制</h3>
          <div class="space-y-2">
            <button class="w-full px-4 py-3 bg-yellow-500/20 text-yellow-300 rounded-lg hover:bg-yellow-500/30 transition-colors flex items-center">
              <i data-lucide="shield" class="w-4 h-4 mr-2"></i>
              合规检查
            </button>
            <button class="w-full px-4 py-3 bg-orange-500/20 text-orange-300 rounded-lg hover:bg-orange-500/30 transition-colors flex items-center">
              <i data-lucide="alert-triangle" class="w-4 h-4 mr-2"></i>
              风险预警设置
            </button>
            <button class="w-full px-4 py-3 bg-red-500/20 text-red-300 rounded-lg hover:bg-red-500/30 transition-colors flex items-center">
              <i data-lucide="activity" class="w-4 h-4 mr-2"></i>
              实时监控面板
            </button>
          </div>
        </div>
      </div>

      <!-- 快捷操作 -->
      <div class="mt-8 pt-6 border-t border-white/20">
        <h3 class="text-white font-semibold mb-4">一键操作</h3>
        <div class="flex flex-wrap gap-3">
          <button @click="generateStrategy" class="px-4 py-2 bg-gradient-to-r from-blue-500/20 to-indigo-500/20 text-white rounded-lg hover:from-blue-500/30 hover:to-indigo-500/30 transition-all">
            <i data-lucide="zap" class="w-4 h-4 mr-2 inline"></i>
            生成应对策略
          </button>
          <button @click="launchBrazilPlan" class="px-4 py-2 bg-gradient-to-r from-green-500/20 to-emerald-500/20 text-white rounded-lg hover:from-green-500/30 hover:to-emerald-500/30 transition-all">
            <i data-lucide="globe" class="w-4 h-4 mr-2 inline"></i>
            启动巴西市场计划
          </button>
          <button @click="optimizePricing" class="px-4 py-2 bg-gradient-to-r from-purple-500/20 to-pink-500/20 text-white rounded-lg hover:from-purple-500/30 hover:to-pink-500/30 transition-all">
            <i data-lucide="refresh-cw" class="w-4 h-4 mr-2 inline"></i>
            自动优化定价
          </button>
          <button @click="exportBusinessReport" class="px-4 py-2 bg-gradient-to-r from-cyan-500/20 to-blue-500/20 text-white rounded-lg hover:from-cyan-500/30 hover:to-blue-500/30 transition-all">
            <i data-lucide="download" class="w-4 h-4 mr-2 inline"></i>
            导出业务报告
          </button>
        </div>
      </div>
    </div>

    <!-- Financial Projection -->
    <div class="glass-card p-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <TrendingUp class="w-8 h-8 mr-3 text-blue-400" />
        财务预测与风险评估
      </h2>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Revenue Projection -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-4">收入预测 (未来12个月)</h3>
          <div class="space-y-3">
            <div class="bg-blue-500/10 rounded-lg p-4">
              <div class="text-blue-400 font-semibold mb-2">美国市场 (受税改影响)</div>
              <div class="flex items-center justify-between">
                <span class="text-white/70">当前收入</span>
                <span class="text-white">$200K/月</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-white/70">预计损失</span>
                <span class="text-blue-400">-$60K/月</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-white/70">调整后收入</span>
                <span class="text-cyan-400">$140K/月</span>
              </div>
            </div>
            
            <div class="bg-green-500/10 rounded-lg p-4">
              <div class="text-green-400 font-semibold mb-2">巴西市场 (新增)</div>
              <div class="flex items-center justify-between">
                <span class="text-white/70">Q1目标</span>
                <span class="text-white">$30K/月</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-white/70">Q2-Q4增长</span>
                <span class="text-green-400">$80K/月</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-white/70">年度预期</span>
                <span class="text-green-400">$120K/月</span>
              </div>
            </div>
            
            <div class="bg-blue-500/10 rounded-lg p-4 border-t border-white/20">
              <div class="text-center">
                <div class="text-2xl font-bold text-green-400">$260K/月</div>
                <div class="text-white/70">总收入预期</div>
                <div class="text-green-400 text-sm">比税改前增长30%</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Risk Assessment -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-4">风险评估与应对</h3>
          <div class="space-y-3">
            <div class="bg-blue-500/10 border border-blue-500/30 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-blue-400 font-semibold">高风险</span>
                <span class="text-blue-400 text-sm">汇率波动</span>
              </div>
              <div class="text-white/80 text-sm mb-2">巴西雷亚尔汇率不稳定，影响利润</div>
              <div class="text-blue-300 text-sm">应对: 汇率对冲工具，多币种定价</div>
            </div>
            
            <div class="bg-indigo-500/10 border border-indigo-500/30 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-indigo-400 font-semibold">中风险</span>
                <span class="text-indigo-400 text-sm">政策变化</span>
              </div>
              <div class="text-white/80 text-sm mb-2">巴西进口政策可能调整</div>
              <div class="text-blue-300 text-sm">应对: 实时政策监控，本地合规顾问</div>
            </div>
            
            <div class="bg-green-500/10 border border-green-500/30 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-green-400 font-semibold">低风险</span>
                <span class="text-green-400 text-sm">竞争加剧</span>
              </div>
              <div class="text-white/80 text-sm mb-2">其他中国卖家进入巴西市场</div>
              <div class="text-blue-300 text-sm">应对: 产品差异化，品牌建设</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { themeState } from '../services/themeService.js'
import {
  AlertTriangle,
  AlertCircle,
  Globe,
  CheckCircle,
  Clock,
  TrendingUp
} from 'lucide-vue-next'

export default {
  name: 'ZhuhaiTradingDashboard',
  components: {
    AlertTriangle,
    AlertCircle,
    Globe,
    CheckCircle,
    Clock,
    TrendingUp
  },
  
  setup() {
    const showAnalysisModal = ref(false)
    const currentAnalysis = ref(null)
    const isLoading = ref(false)
    const notifications = ref([])
    
    // 税务管理功能
    const analyzeTaxImpact = async () => {
      isLoading.value = true
      
      // 模拟税改影响分析
      setTimeout(() => {
        currentAnalysis.value = {
          type: 'tax_impact',
          title: '美国税改影响分析报告',
          data: {
            currentLoss: '$60K/月',
            affectedProducts: 156,
            newTaxRate: '30%',
            recommendedActions: [
              '调整产品定价策略，转移30%税收成本',
              '优化包裹合并，减少单次税费',
              '拓展巴西等免税市场',
              '申请小企业税收减免'
            ]
          }
        }
        showAnalysisModal.value = true
        isLoading.value = false
        
        addNotification('税改影响分析已完成', 'success')
      }, 2000)
    }
    
    const openTaxCalculator = () => {
      // 打开税务计算器页面
      window.open('/tax-calculator', '_blank')
      addNotification('正在打开关税计算器...', 'info')
    }
    
    const generateComplianceReport = async () => {
      isLoading.value = true
      
      setTimeout(() => {
        // 模拟生成合规报告
        const reportData = {
          complianceRate: '98.5%',
          riskyItems: 12,
          suggestions: [
            '更新产品安全认证',
            '完善海关申报文档',
            '建立合规监控系统'
          ]
        }
        
        // 模拟下载文件
        const blob = new Blob([JSON.stringify(reportData, null, 2)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `税务合规报告_${new Date().toLocaleDateString()}.json`
        a.click()
        
        isLoading.value = false
        addNotification('税务合规报告已生成并下载', 'success')
      }, 1500)
    }
    
    // 市场拓展功能
    const analyzeBrazilMarket = async () => {
      // 跳转到区域对比页面，专门分析巴西市场
      window.location.href = '#/region-compare?region=brazil'
      addNotification('正在分析巴西市场数据...', 'info')
    }
    
    const openCompetitorAnalysis = () => {
      // 跳转到政策分析页面的竞品分析功能
      window.location.href = '#/policy-analysis?type=competitor'
      addNotification('正在加载竞品对比分析...', 'info')
    }
    
    const openSalesPredictor = () => {
      // 跳转到政策模拟页面的销售预测功能
      window.location.href = '#/policy-simulation?model=sales_prediction'
      addNotification('正在打开销售预测模型...', 'info')
    }
    
    // 一键操作功能
    const generateStrategy = async () => {
      isLoading.value = true
      
      setTimeout(() => {
        currentAnalysis.value = {
          type: 'strategy',
          title: 'AI生成应对策略',
          data: {
            priority1: '立即实施包裹合并策略，预计节省25%税费',
            priority2: '启动巴西市场拓展，3个月内实现盈利平衡',
            priority3: '调整产品定价，将税收成本转移给终端用户',
            timeline: '3个月完成全部策略实施',
            expectedReturn: '预计挽回损失80%，新增收益30%'
          }
        }
        showAnalysisModal.value = true
        isLoading.value = false
        addNotification('应对策略已生成', 'success')
      }, 3000)
    }
    
    const launchBrazilPlan = async () => {
      if (confirm('确定要启动巴西市场拓展计划吗？这将开始第一阶段的市场测试。')) {
        isLoading.value = true
        
        setTimeout(() => {
          addNotification('巴西市场拓展计划已启动！', 'success')
          addNotification('正在进行市场准入文件申请...', 'info')
          addNotification('预计3个月内完成第一阶段测试', 'info')
          isLoading.value = false
        }, 2000)
      }
    }
    
    const optimizePricing = async () => {
      isLoading.value = true
      
      setTimeout(() => {
        const optimizedPricing = {
          adjustedProducts: 234,
          averageIncrease: '12%',
          expectedRevenue: '+$180K/年',
          customerRetention: '95%'
        }
        
        currentAnalysis.value = {
          type: 'pricing',
          title: '自动定价优化结果',
          data: optimizedPricing
        }
        showAnalysisModal.value = true
        isLoading.value = false
        addNotification('定价优化已完成', 'success')
      }, 2500)
    }
    
    const exportBusinessReport = async () => {
      isLoading.value = true
      
      setTimeout(() => {
        // 生成综合业务报告
        const reportData = {
          reportDate: new Date().toLocaleDateString(),
          taxImpact: {
            monthlyLoss: '$60K',
            affectedProducts: 156,
            complianceRate: '98.5%'
          },
          marketExpansion: {
            brazilProgress: '规划阶段',
            expectedRevenue: '$120K/月',
            timeline: '12个月'
          },
          riskAssessment: {
            high: '汇率波动',
            medium: '政策变化',
            low: '竞争加剧'
          },
          recommendations: [
            '立即实施包裹合并策略',
            '加速巴西市场进入',
            '优化产品定价策略',
            '建立风险监控系统'
          ]
        }
        
        // 模拟下载报告
        const blob = new Blob([JSON.stringify(reportData, null, 2)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `珠海贸易公司业务报告_${new Date().toLocaleDateString()}.json`
        a.click()
        
        isLoading.value = false
        addNotification('业务报告已导出', 'success')
      }, 2000)
    }
    
    // 通知系统
    const addNotification = (message, type = 'info') => {
      const notification = {
        id: Date.now(),
        message,
        type,
        timestamp: new Date().toLocaleTimeString()
      }
      notifications.value.unshift(notification)
      
      // 自动清除通知
      setTimeout(() => {
        const index = notifications.value.findIndex(n => n.id === notification.id)
        if (index > -1) {
          notifications.value.splice(index, 1)
        }
      }, 5000)
    }
    
    const closeAnalysisModal = () => {
      showAnalysisModal.value = false
      currentAnalysis.value = null
    }
    
    onMounted(() => {
      // 初始化时显示欢迎消息
      addNotification('欢迎使用珠海贸易公司智能管理系统', 'success')
    })
    
    return {
      themeState,
      showAnalysisModal,
      currentAnalysis,
      isLoading,
      notifications,
      
      // 税务管理
      analyzeTaxImpact,
      openTaxCalculator,
      generateComplianceReport,
      
      // 市场拓展
      analyzeBrazilMarket,
      openCompetitorAnalysis,
      openSalesPredictor,
      
      // 一键操作
      generateStrategy,
      launchBrazilPlan,
      optimizePricing,
      exportBusinessReport,
      
      // 工具函数
      closeAnalysisModal,
      addNotification
    }
  }
}
</script>

<style scoped>
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.text-electric-500 {
  color: #60a5fa;
}
</style> 